<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/plugins/editor.md-master/css/editormd.css}" />
    <link rel="stylesheet" th:href="@{/plugins/hp-ui/hp-ui.css}" />
    <link rel="stylesheet" th:href="@{/css/base.css}" />
    <link rel="stylesheet" th:href="@{/css/blog/detail.css}" />
    <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
    <script type="text/javascript" charset="utf-8" th:src="@{/plugins/hp-ui/hp-ui.js}"></script>
    <script type="text/javascript" charset="utf-8" th:src="@{/plugins/jquery/jquery-3.4.1.min.js}"></script>
    <script type="text/javascript" charset="utf-8" th:src="@{/plugins/editor.md-master/lib/marked.min.js}"></script>
    <script type="text/javascript" charset="utf-8" th:src="@{/plugins/editor.md-master/lib/prettify.min.js}"></script>
    <script type="text/javascript" charset="utf-8" th:src="@{/plugins/editor.md-master/lib/raphael.min.js}"></script>
    <script type="text/javascript" charset="utf-8" th:src="@{/plugins/editor.md-master/lib/underscore.min.js}"></script>
    <script type="text/javascript" charset="utf-8" th:src="@{/plugins/editor.md-master/lib/sequence-diagram.min.js}"></script>
    <script type="text/javascript" charset="utf-8" th:src="@{/plugins/editor.md-master/lib/flowchart.min.js}"></script>
    <script type="text/javascript" charset="utf-8" th:src="@{/plugins/editor.md-master/lib/jquery.flowchart.min.js}"></script>
    <script type="text/javascript" charset="utf-8" th:src="@{/plugins/editor.md-master/editormd.js}"></script>


</head>
<body>
<header th:replace="~{fragments/header :: header}">...</header>
    <article>
        <h3 th:text="${blog.title}"></h3>
        <div class="detail-info">
            <span th:text="${blog.createdTime}"></span>
            <span th:text="${blog.author}"></span>
        </div>

        <div class="content" th:if="${blog.docType == 1}" th:utext="${blog.body}"></div>
        <div id="layout" th:if="${blog.docType == 2}" class="editor content">
            <div id="detail-editormd">
                <!-- thymeleaf的textarea数据回显用th:text，th:value不能回显 -->
                <textarea placeholder="markdown语言" th:text="${blog.body}"></textarea>
            </div>
        </div>
    </article>

<script>
    var detailEditor;
    /*$(function () {*/
        detailEditor = editormd.markdownToHTML("detail-editormd", {
            htmlDecode      : "style,script,iframe",  // you can filter tags decode
            emoji           : true,
            taskList        : true,
            tex             : true,  // 默认不解析
            flowChart       : true,  // 默认不解析
            sequenceDiagram : true,  // 默认不解析
            codeFold        : true
        });
    /*});*/

</script>
</body>
</html>